{% extends 'html.html' %}
{% load static %}
{% load i18n %}
{% load custom_filters %}
{% load globalconfig_tags %}

{% block page-head %}
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    {% block head %}{% endblock %}
    {% get_global_config_tag as global_config %}
    <title>  {% if global_config %} {{ global_config.site_name }}|{% endif %}{% block title %}{% endblock %}</title>
{% endblock %}

{% block page-header %}
    <nav class="navbar navbar-light bg-light navbar-expand-md">
        {#        <a class="navbar-brand" href="#"><img class="navbar-brand" src="{% static 'images/icon/logo_pic.png' %}" height="30"></a>#}
        {#        <a class="navbar-brand" href="{% url 'buckets:bucket_view' %}">{% trans '地球大数据科学工程对象云存储' %}</a>#}
        <a class="navbar-brand" href="#"><img src="{% static 'images/logo/iHarbor-Logo.svg' %}" height="30"></a>
        {% get_global_config_tag as global_config %}
        <a class="navbar-brand" href="{% url 'home' %}">{% if global_config %} {{ global_config.site_name }}{% else %} {% trans '对象存储服务' %} {% endif %}</a>
        {% get_frontend_url as front_url %}
        {% if front_url %}
            {#            <a class="nav-link" href="{{ front_url }}">{% trans '管理控制台' %}</a>#}
            {#        {% else %}#}
            <a class="nav-link" href="{% url 'buckets:bucket_view' %}">{% trans '管理控制台' %}</a>
        {% endif %}

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto"></ul>
            <ul class="navbar-nav">

                {% if user.is_staff %}
                    <div class="nav-item dropdown">
                        <a class="nav-link" href="{% url 'admin:index' %}">{% trans '后台管理' %}</a>
                    </div>
                {% endif %}

                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">{% trans '文档' %}<span class="caret"></span></a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'apidocs' %}"
                           target="view_window">{% trans 'API文档' %}</a>
                        {#                        <a class="dropdown-item" href="{% url 'redoc' %}" target="view_window" >API ReDoc</a>#}
                        <a class="dropdown-item" href="{% url 'docs:docs' %}">{% trans '帮助文档' %}</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'about' %}">{% trans '版本更新日志' %}</a>
                    </div>
                </div>
                <li class="nav-item dropdown">
                    {% get_available_languages as LANGUAGES %}
                    <form action="{% url 'set_language' %}" method="post" id="id-language-switcher" hidden>
                        {% csrf_token %}
                    </form>
                    <a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown-language" role="button"
                       data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">

                        <i class="q-icon" aria-hidden="true" role="presentation" style="font-size: 10px">
                            <svg viewBox="0 0 24 24" width="20px" style="margin-bottom: 8%">
                                <path d="M0 0h24v24H0z" style="fill: none;">

                                </path>
                                <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" style="fill: #757575;">

                                </path>
                            </svg>
                        </i>

                        {% if LANGUAGE_CODE == 'en' %}
                            {% trans 'English' %}<span class="caret"></span>
                        {% else %}
                            {% trans '简体中文' %}<span class="caret"></span>
                        {% endif %}

                    </a>
                    <div class="dropdown-menu" id="language-switcher" aria-labelledby="navbar-dropdown-language">
                        {% for code, name in LANGUAGES %}
                            {% if code == 'zh-hans' %}
                                <a class="dropdown-item language-switcher-item" href="#"
                                   value="{{ code }}">{{ name }}</a>
                            {% else %}
                                <a class="dropdown-item language-switcher-item" href="#" value="{{ code }}">English</a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </li>
                {% if user.is_authenticated %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-user"></i>{{ user.username }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{% url 'users:logout' %}">{% trans '登出' %}</a>
                            <a class="dropdown-item" href="{% url 'users:change_password' %}">{% trans '修改密码' %}</a>
                            <a class="dropdown-item" href="{% url 'users:security' %}">{% trans '安全凭证' %}</a>
                            <div class="dropdown-divider"></div>
                        </div>
                    </li>
                {% else %}
                    {#                    <li class="nav-item"><a class="nav-link" href="{% url 'users:signin' %}">{% trans '登录' %}</a></li>#}
                    <li class="nav-item"><a class="nav-link" href="{% url 'users:local_login' %}">{% trans '登录' %}</a>
                    </li>
                    {#                    <li class="nav-item"><a class="nav-link" href="{% url 'users:register' %}">{% trans '注册' %}</a></li>#}
                {% endif %}
            </ul>
        </div>
    </nav>
{% endblock %}

{% block page-content %}
    {% block boby %}{% endblock %}
{% endblock %}

{% block page-script %}
    <script type="text/javascript" src="{% static 'iharbor/js/common.js' %}"></script>
    <script>
        $("#language-switcher").on("click", ".language-switcher-item", function () {
            let langValue = $(this).attr('value');
            let form = $("#id-language-switcher");
            let langInput = document.createElement("input");
            langInput.type = "text";
            langInput.name = "language";
            langInput.value = langValue;
            form.append(langInput);
            form.submit();
        })
    </script>
    {% block script %}{% endblock %}
{% endblock %}
